<template>
  <div>
    <!--搜索框-->
    <div class="pd-10">
      <el-input style="width: 300px" suffix-icon="el-icon-search" placeholder="请输入医生姓名" class="mr-5" v-model="nickname"></el-input>
      <el-select clearable v-model="deptId" placeholder="请选择科室" style="width: 300px;margin-left: 20px">
        <el-option v-for="item in departments" :key="item.id" :label="item.deptName" :value="item.id">
        </el-option>
      </el-select>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>
    <!--医生展示-->
    <div style="margin-top: 20px">
      <el-row>
        <el-col :span="8" v-for="(item,index) in tableData" :key="item.id" >
          <el-card :body-style="{ padding: '15px 15px' }" style="margin: 0 5px;" shadow="hover">
            <div style="display: flex">
              <div>
<!--                <img :src="item.avatar" style="width: 200px;height: 300px;">-->
                <el-image
                    style="width: 200px;height: 300px;"
                    :src="item.avatar"
                    :preview-src-list="[item.avatar]">
                </el-image>
              </div>
              <div style="padding: 3px 5px;position: relative;margin: 0 10px">
                {{ item.description }}
                <div style="font-weight: bold;font-size: 13px;color: #3a8ee6;position: absolute;right: 0;bottom: 15px;margin-bottom: 5px">
                  挂号剩余：{{ item.bookingNumber }} 位
                </div>
                <div style="font-weight: bold;position: absolute;right: 0;bottom: 0">
                  {{ item.bookingPrice }} 元
                </div>
              </div>
            </div>
            <div style="padding: 14px;">
              <span style="color: #3a8ee6">姓名：{{ item.nickname }}</span>
              <div class="bottom clearfix">
                <time class="time" style="font-size: 10px">入院时间：{{ item.createTime }}</time>
                <el-button type="text" class="button" style="font-size: 18px;margin-left: 18px;font-weight: bold" @click="handleBooking(item.id,item.nickname,item.bookingPrice,item.bookingNumber)">挂号</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!--分页-->
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Doctor",
  data() {
    return {
      tableData: [],
      nickname:"",
      deptId: "",
      roleType: "ROLE_DOCTOR",
      form: {
        department: {}
      },
      multipleSelection: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      roles: [],
      departments: []
    }
  },
  methods: {
    load() {
      this.request.get("/doctor/page",{
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          nickname: this.nickname,
          deptId: this.deptId,
          roleType: this.roleType
        }
      }).then(res => {
        console.log(res);
        this.tableData = res.data.records
        this.total = res.data.total
      })
      //获取下拉角色信息
      this.request.get("/role").then(res => {
        this.roles = res.data
      })
      //获取下拉科室信息
      this.request.get("/department").then(res => {
        this.departments = res.data
      })
    },
    handleBooking(doctorId,doctorName,bookingPrice,bookingNumber) {
      console.log("医生id：" + doctorId + "医生姓名：" + doctorName + "挂号价格：" + bookingPrice + "挂号剩余：" + bookingNumber)
      const startTime = new Date()
      startTime.setHours(8,0,0,0)
      const nowTime = new Date()
      // console.log(nowTime-startTime)
      const res = nowTime - startTime
      if (res > 0) {
        // this.$message.success("可以挂号")
        if (bookingNumber !== 0 || bookingNumber !== "0") {
          //发起order请求
          this.request.get("/order/booking/" + doctorId + "/" + doctorName + "/" + bookingPrice).then(res => {
            console.log("order结果：")
            console.log(res);
            window.open(res.data)
          })
        }else {
          this.$message.error("当前医生今日已无可挂号数量")
        }
      }else {
        this.$message.error("还未开始挂号，请在八点之后挂号")
      }
    },
    exportFile() {
      window.open(`http://${serverIp}:${serverPort}/doctor/export`)
    },
    handleExcelImportSuccess() {
      this.$message.success("上传成功")
      this.load()
    },
    handleAdd() {
      this.dialogFormVisible = true
    },
    save() {
      this.request.post("/doctor/save",this.form).then(res => {
        console.log(this.form)
        console.log(res)
        if (res.code === '200') {
          this.dialogFormVisible = false
          this.form = {}
          this.$message.success("保存成功")
          this.load()
        }else {
          this.$message.error("保存失败")
        }
      })
    },
    handleEdit(row) {
      console.log("edit")
      console.log(row)
      this.form.department = Object.assign({},row.department)
      this.form = Object.assign({},row)
      this.dialogFormVisible = true
    },
    del(id) {
      this.request.delete("/doctor/"+id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    delBatch() {
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/doctor/del/batch",ids).then(res => {
        if (res.data) {
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },
    reset() {
      this.nickname = ""
      this.deptId = ""
      this.load()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.load()
    }
  },
  created() {
    this.load()
  },
  watch: {
    dialogFormVisible() {
      if (this.dialogFormVisible === false) {
        this.form = {}
        this.form.department = {}
        console.log("执行了watch方法")
      }
    }
  }

}
</script>

<style>
.el-header {
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>